<template>
	<view class="profitCount-muchFit">
		<view class="box">
			<view class="box1">
				<view class="title">{{$t('profitCount.price')}}</view>
				<view class="box2"><input type="text" v-model="itcP"><view class="an">CNY</view></view>
			</view>
			<view class="box1">
				<view class="title">{{$t('profitCount.waste')}}</view>
				<view class="box2"><input type="text" v-model="onePower"><view class="an">W</view></view>
			</view>
			<view class="box1">
				<view class="title">{{$t('profitCount.computing')}}</view>
				<view class="box2"><input type="text" v-model="oneComputa"><view class="an">T</view></view>
			</view>
			<view class="box1">
				<view class="title">{{$t('profitCount.quantity')}}</view>
				<view class="box2"><input type="text" v-model="itcNumber"><view class="an">台</view></view>
			</view>
			<view class="box1">
				<view class="title">{{$t('money.withDraw.commission')}}</view>
				<view class="box2"><input type="text" v-model="borkerage"><view class="an">%</view></view>
			</view>
			<view class="box1">
				<view class="title">{{$t('profitCount.currency')}}</view>
				<view class="box2"><input type="text" v-model="biPrice"><view class="an">CNY</view></view>
			</view>
			<view class="box1">
				<view class="title">{{$t('profitCount.other')}}</view>
				<view class="box2"><input type="text" v-model="other"><view class="ans">CNY/(台*天)</view></view>
			</view>
			<view class="box1">
				<view class="title">{{$t('profitCount.mining')}}</view>
				<view class="box2"><input type="text" v-model="goDifficulty"></view>
			</view>
			<view class="box1">
				{{$t('money.time.startTime')}}
			<ruiDatePicker
			    fields="second"
			    start="2010-00-00 00:00:00"
			    end="2030-12-30 23:59:59"
			    :value="value"
			    @change="bindChange1"
			    @cancel="bindCancel1"
				class="Mtime"
			 ></ruiDatePicker>
			</view>
			<view class="box1">
				{{$t('money.time.endTime')}}
			 <ruiDatePicker
			     fields="second"
			     start="2010-00-00 00:00:00"
			     end="2030-12-30 23:59:59"
			     :value="value"
			     @change="bindChange2"
			     @cancel="bindCancel2"
			 	class="Mtime"
			  ></ruiDatePicker>
			</view>
		</view>
		
	</view>
</template>

<script>
	import ruiDatePicker from '@/components/rattenking-dtpicker/rattenking-dtpicker.vue';
	export default {
		components: {ruiDatePicker},
		data() {
			return {
				value:'2020-09-09 12:00:00',
				itcP:1000,
				onePower:6300,
				oneComputa:200,
				itcNumber:5,
				borkerage:0,
				biPrice:226,
				other:0,
				goDifficulty:193624,
				startTime:2021-12-15,
				outTime:2021-12-15,
			};
		},
		methods:{
			bindChange1(e){
				// 开始时间
				console.log(e);
			},
			bindCancel1(e){
				console.log(e);
			},
			bindChange2(e){
				// 结束时间
				console.log(e);
			},
			bindCancel2(e){
				console.log(e);
			},
		}
		
	}
</script>

<style>
.box{
	width: 94%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding-bottom: 240rpx;
}
.title{
	margin: 10rpx 0;
}
.box1{
	width: 42%;
	margin: 20rpx;
}
.box2{
	background-color: #FFFFFF;
	display: flex;
	border-radius: 16rpx;
}
.box2>input{
	width: 60%;
	height: 60rpx;
	padding-left: 10rpx;
}
.an{
	background-color:#DCDCDC;
	position: relative;
	 left: 60rpx; 
	line-height: 60rpx;
	width: 68rpx;
	text-align: center;
}
.ans{
	background-color:#DCDCDC;
	position: relative;
	 /* left: 30px; */
	 font-size: .8em;
	line-height: 60rpx;
	width: 188rpx;
	text-align: center;
	}
	.Mtime{
		width: 110%;
		font-size: .8em;
		background-color: #FFFFFF;
	}
</style>
